<template>
  <div class="jifen">
    <header>

      <div class="left" @click="danji"><a><img src="../assets/img/m1.png" ></a></div>
      <div class="center">{{msg}}</div>  
      <div class="right"><a></a></div>
    </header>
    <main>
    <div class="ka">
      <div class="card">
        <p>ETC卡号</p>
        <div class="number">
          <input type="text" name="" v-model="cannumber" placeholder="请输入37开头的20位卡号">
        </div>
      </div>
      <div class="next"  :class="{nextgreen:nextg}" @click="nextxia">
        下一步
      </div>
      </div>
    </main>
    <footer v-show="yin">
      您的卡号输入错误,请重新输入!
    </footer>
  </div>

</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: '我的ETC卡',
      yin: false,
      cannumber: '',
      yinchang:false,
      account:{kahao:'123456789123456789',xingming:"吴鹏",chepai:"京B4556"}
    }
  },
  methods: {
    danji () {
      this.$router.go(-1)
    },
    nextxia () {
      if(this.cannumber.length===18 && this.cannumber=== this.account.kahao ){
        this.$router.push({path:"/whatjifen"});
        this.yin=false
        
      }else if(this.cannumber.length===18 && this.cannumber!= this.account.kahao){
          this.yin=true
      }
    }
  },
  computed:{
    nextg () {
      return this.cannumber.length===18 
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='less'>
@import '.././assets/css/reset.css';
  @import '.././assets/css/index.less';
header{
  position: fixed;
  top: 0;
  width: 100%;
  .height(140);
  .font-size(40);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #28a85b;
  color:#ffffff;
  .left,.right{
      .width(160) ;
  }
  .center{
      flex: 1;
      text-align: center;
  }
  .left{
    a{
      display: block;
      img{
        .height(40);
        .padding(0,0,0,40);
        display: block;
      }
    }
  }
}
main{
  .padding(140,20,0,20);
  .card{
     .padding(70,0,0,0);
     display: flex;
    p{
      .font-size(30);
      .line-height(80);
      .width(150);

    }
    .number{
      flex:1;
      .height(80);
      .font-size(30);
      .line-height(80);
      border:2px solid #ccc;
      input{
        border:none;
        .padding(0,0,0,20);
      }
    }
  }
  .next{
    width: 100%;
    .height(110);
    .line-height(110);
    text-align: center;
    color:#ffffff;
    .font-size(40);
   background: #cecece;
   .margin(130,0,0,0);
  }
  .nextgreen{
    background: #28a85b;
  }

}
footer{
  position: fixed;
  width: 100%;
  text-align: center;
  .font-size(30);
  color:red;
  .bottom(220);
}

</style>
